/**
 * Created by FreezeSoul on 2016/9/1.
 */
define([
    "app/core/base",
    "app/core/util",
    "../commonMeta",
    "jquery",
    "underscore",
    'JSONParse',
    'loglevel',
    'jqueryTmpl',
    'jQueryUUID'
], function (Chart, Util, Meta, $, _, JSON, log) {

    var property = {
        config: "property",
        option: [
            {
                group: '基础',
                id: 'IMAGE_RESOURCE_I',
                name: '图片资源I',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_I',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'IMAGE_RESOURCE_II',
                name: '图片资源II',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_II',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'IMAGE_RESOURCE_III',
                name: '图片资源III',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_III',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'IMAGE_RESOURCE_IV',
                name: '图片资源IV',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_IV',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'IMAGE_RESOURCE_V',
                name: '图片资源V',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_V',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'IMAGE_RESOURCE_VI',
                name: '图片资源VI',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_VI',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'IMAGE_RESOURCE_VII',
                name: '图片资源VII',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_VII',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'IMAGE_RESOURCE_VIII',
                name: '图片资源VIII',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_VIII',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'IMAGE_RESOURCE_IX',
                name: '图片资源IX',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_IX',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'IMAGE_RESOURCE_X',
                name: '图片资源X',
                enable: false,
                type: 'resource',
                value: '',
                default: '',
                link: 'imageUrl_X',
                tooltip: '设置图片的资源路径'
            },
            {
                group: '基础',
                id: 'F_IMAGE_WIDTH',
                name: '图片宽度',
                enable: false,
                type: 'number',
                value: 400,
                default: 400,
                link: 'width',
                tooltip: '图片宽度'
            },
            {
                group: '基础',
                id: 'F_IMAGE_HEIGHT',
                name: '图片高度',
                enable: false,
                type: 'number',
                value: 200,
                default: 200,
                link: 'height',
                tooltip: '图片高度'
            },
            {
                group: '基础',
                id: 'F_ZOOM_RATIO',
                name: '缩放比例',
                enable: false,
                type: 'number',
                value: 1.3,
                default: 1.3,
                link: 'ratio',
                tooltip: '图片缩放比例'
            },
            {
                group: '基础',
                id: 'F_MARGIN_WIDTH',
                name: '图片间隔',
                enable: false,
                type: 'number',
                value: 30,
                default: 30,
                link: 'margin',
                tooltip: '图片间隔'
            }, {
                group: '事件',
                id: 'ImageClick_I',
                name: '图片跳转I',
                enable: true,
                type: 'pivotEvent',
                value: {
                    Event: "ImageClick_I",
                    Params: []
                },
                tooltip: '图片点击跳转事件，钻取设置'
            },
            {
                group: '事件',
                id: 'ImageClick_II',
                name: '图片跳转II',
                enable: true,
                type: 'pivotEvent',
                value: {
                    Event: "ImageClick_II",
                    Params: []
                },
                tooltip: '图片点击跳转事件，钻取设置'
            }, {
                group: '事件',
                id: 'ImageClick_III',
                name: '图片跳转III',
                enable: true,
                type: 'pivotEvent',
                value: {
                    Event: "ImageClick_III",
                    Params: []
                },
                tooltip: '图片点击跳转事件，钻取设置'
            }, {
                group: '事件',
                id: 'ImageClick_IV',
                name: '图片跳转IV',
                enable: true,
                type: 'pivotEvent',
                value: {
                    Event: "ImageClick_IV",
                    Params: []
                },
                tooltip: '图片点击跳转事件，钻取设置'
            }, {
                group: '事件',
                id: 'ImageClick_V',
                name: '图片跳转V',
                enable: true,
                type: 'pivotEvent',
                value: {
                    Event: "ImageClick_V",
                    Params: []
                },
                tooltip: '图片点击跳转事件，钻取设置'
            }, {
                group: '事件',
                id: 'ImageClick_VI',
                name: '图片跳转VI',
                enable: true,
                type: 'pivotEvent',
                value: {
                    Event: "ImageClick_VI",
                    Params: []
                },
                tooltip: '图片点击跳转事件，钻取设置'
            }, {
                group: '事件',
                id: 'ImageClick_VII',
                name: '图片跳转VII',
                enable: true,
                type: 'pivotEvent',
                value: {
                    Event: "ImageClick_VII",
                    Params: []
                },
                tooltip: '图片点击跳转事件，钻取设置'
            }, {
                group: '事件',
                id: 'ImageClick_VIII',
                name: '图片跳转VIII',
                enable: true,
                type: 'pivotEvent',
                value: {
                    Event: "ImageClick_VIII",
                    Params: []
                },
                tooltip: '图片点击跳转事件，钻取设置'
            }, {
                group: '事件',
                id: 'ImageClick_IX',
                name: '图片跳转IX',
                enable: true,
                type: 'pivotEvent',
                value: {
                    Event: "ImageClick_IX",
                    Params: []
                },
                tooltip: '图片点击跳转事件，钻取设置'
            }, {
                group: '事件',
                id: 'ImageClick_X',
                name: '图片跳转X',
                enable: true,
                type: 'pivotEvent',
                value: {
                    Event: "ImageClick_X",
                    Params: []
                },
                tooltip: '图片点击跳转事件，钻取设置'
            },
            {
                group: '事件',
                id: 'ImageClickJsEval',
                name: '点击执行脚本',
                enable: false,
                type: 'script',
                value: '',
                default: '',
                link: 'clickScript',
                tooltip: '点击执行脚本，可定制复杂的JS操作'
            }
        ].concat($.extend(true, [], Meta.commonProperties)),
        MapOption: function (option) {
            Util.linkOption(this.option, option);
        }
    };

    var file = Chart.extend({
        constructor: function (layout) {
            this._layout = layout;
            this._element = null;
            this._container = null;
            this._uuid = "fisheye_menu_" + $.uuid();
            this._option = {
                Series: [],
                Events: [],
                Extend: $.extend(true, {}, property),
                Option: {
                    uuid: '',
                    class: '',
                    display: true,
                    imageUrl_I: "",
                    imageUrl_II: "",
                    imageUrl_III: "",
                    imageUrl_IV: "",
                    imageUrl_V: "",
                    imageUrl_VI: "",
                    imageUrl_VII: "",
                    imageUrl_VIII: "",
                    imageUrl_IX: "",
                    imageUrl_X: "",
                    width: 400,
                    height: 200,
                    ratio: 1.3,
                    margin: 30,
                    clickScript: '',
                    disposeScript: ''
                }
            };
        },
        init: function (element) {
            try {
                this._container = element;
            } catch (e) {
                log.error(e);
            }
        },
        _readProperty: function () {
            try {
                if (!this._option.Extend) return;
                Util.deepMapOption(property, this._option.Extend, this._option.Option);
            } catch (e) {
                log.error(e);
            }
        },
        _render: function (option) {
            var _this = this;
            var htmlStr = '<div style="width: 100%;height: 100%;text-align: center;margin-top: 30%;">';
            var rootPath = "static/resource/";
            var imageFlagName = ["I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X"];
            var imagePathArry = [
                this._option.Option.imageUrl_I,
                this._option.Option.imageUrl_II,
                this._option.Option.imageUrl_III,
                this._option.Option.imageUrl_IV,
                this._option.Option.imageUrl_V,
                this._option.Option.imageUrl_VI,
                this._option.Option.imageUrl_VII,
                this._option.Option.imageUrl_VIII,
                this._option.Option.imageUrl_IX,
                this._option.Option.imageUrl_X
            ];
            this._uuid = "fisheye_menu_" + $.uuid();
            htmlStr += "<ul id='" + this._uuid + "' style='list-style: none;padding: 0;display: inline-block;'>";
            $.each(imagePathArry, function (i, path) {
                if (path) {
                    var imageUrl = adConfig.baseServiceUrl + rootPath + path;
                    htmlStr += '<li style="margin: auto ' + _this._option.Option.margin + 'px;position: relative;display: block;float: left;">' +
                        '<a class="dock-item"><img src="' + imageUrl + '" alt="" data-image-id="' + imageFlagName[i] + '"/></a>' +
                        '</li>';
                }
            });
            htmlStr += "</ul>";
            htmlStr += "</div>";
            var $element = $(htmlStr);
            $(this._container).empty();
            $element.appendTo(this._container);
            var fisheyemenu = {
                ratioNumber: this._option.Option.ratio,
                startSizeX: this._option.Option.width,
                startSizeY: this._option.Option.height,
                contanerId: this._uuid,
                init: function () {
                    fisheyemenu.endSizeX = fisheyemenu.startSizeX * fisheyemenu.ratioNumber;
                    fisheyemenu.endSizeY = fisheyemenu.startSizeY * fisheyemenu.ratioNumber;
                    var animElements = document.getElementById(fisheyemenu.contanerId).getElementsByTagName("img");
                    for (var i = 0; i < animElements.length; i++) {
                        var y = animElements[i];
                        y.style.width = fisheyemenu.startSizeX + 'px';
                        y.style.height = fisheyemenu.startSizeY + 'px';
                        animElements[i].onmouseover = changeSize;
                        animElements[i].onmouseout = restoreSize;
                    }

                    function changeSize() {
                        if (!this.currentWidth)
                            this.currentWidth = fisheyemenu.startSizeX;
                        if (!this.currentHeight)
                            this.currentHeight = fisheyemenu.startSizeY;
                        fisheyemenu.resizeAnimation(this, this.currentWidth, fisheyemenu.endSizeX, this.currentHeight, fisheyemenu.endSizeY, 15, 10, 0.333);
                    }

                    function restoreSize() {
                        if (!this.currentWidth) return;
                        if (!this.currentHeight) return;
                        fisheyemenu.resizeAnimation(this, this.currentWidth, fisheyemenu.startSizeX, this.currentHeight, fisheyemenu.startSizeY, 15, 10, 0.5);
                    }
                },
                resizeAnimation: function (elem, startWidth, endWidth, startHeight, endHeight, steps, intervals, powr) {
                    if (elem.changeMemInt) window.clearInterval(elem.changeMemInt);
                    var actStep = 0;
                    elem.changeMemInt = window.setInterval(
                        function () {
                            elem.currentWidth = fisheyemenu.easeInOut(startWidth, endWidth, steps, actStep, powr);
                            elem.currentHeight = fisheyemenu.easeInOut(startHeight, endHeight, steps, actStep, powr);
                            elem.style.width = elem.currentWidth + "px";
                            elem.style.height = elem.currentHeight + "px";
                            elem.style.marginTop = (fisheyemenu.startSizeY - elem.currentHeight) / 2 + "px";
                            actStep++;
                            if (actStep > steps) window.clearInterval(elem.changeMemInt);
                        }
                        , intervals)
                },
                easeInOut: function (minValue, maxValue, totalSteps, actualStep, powr) {
                    var delta = maxValue - minValue;
                    var stepp = minValue + (Math.pow(((1 / totalSteps) * actualStep), powr) * delta);
                    return Math.ceil(stepp)
                }
            };
            fisheyemenu.init();
            this._bindEvent($element);
            //Util.setCommonMeta(this, this._container, this._option.Option);
            //Util.initChartLifeTime(this, this._container, this._option.Option);

            return $element;
        },
        example: function () {
            try {
                this._element = this._render(this._option.Option);
            } catch (e) {
                log.error(e);
            }
        },
        _bindEvent: function (element) {
            var _this = this;
            $(element).find("img").on("click", function (e) {
                if (_this._layout
                    && _this._layout.navigate
                    && _this._option.Events
                    && _this._option.Events.length > 0) {

                    var registerEvent = _.findWhere(_this._option.Events, {Event: "ImageClick_" + $(this).data("image-id")});
                    if (registerEvent) {
                        var pageId = registerEvent.PageId;
                        _this._layout.navigate(pageId, []);
                    }
                    e.preventDefault();
                }

                if (_this._option.Option
                    && _this._option.Option.clickScript) {
                    Util.evalJavaScript(_this, _this._option.Option.clickScript);
                }
            });
        },
        _bindData: function (data) {
        },
        setData: function (data) {
            try {
                this._readProperty();

                if (data
                    && this._option.Binding
                    && this._option.Binding.length > 0
                    && this._option.Extend
                ) {
                    this._bindData(data);
                }
                this._element = this._render(this._option.Option);
            } catch (e) {
                log.error(e);
            }
        },
        setOption: function (option) {
            try {
                return this._option = $.extend(true, {}, option);
            } catch (e) {
                log.error(e);
            }
        },
        getOption: function () {
            try {
                this._readProperty();
            } catch (e) {
                log.error(e);
            }
            return this._option;
        },
        setTheme: function (theme) {
            try {
            } catch (e) {
                log.error(e);
            }
        },
        resize: function () {
            try {
            } catch (e) {
                log.error(e);
            }
        },
        showLoading: function () {
            try {
                if (this._layout && this._layout.showLoading) {
                    this._layout.showLoading(this);
                }
            } catch (e) {
                log.error(e);
            }
        },
        hideLoading: function () {
            try {
                if (this._layout && this._layout.hideLoading) {
                    this._layout.hideLoading(this);
                }
            } catch (e) {
                log.error(e);
            }
        },
        dispose: function () {
            try {
                $(this._element).off().remove();
                //Util.disposeChartLifeTime(this, this._container, this._option.Option);

            } catch (e) {
                log.error(e);
            }
        },
        getElement: function () {
            return this._element;
        },
        getChart: function () {
            return this._element;
        }
    });

    return {
        Chart: file,
        Property: property
    };
});